<script>
import {onMounted, reactive,toRaw} from "vue"
export default {
    props:["listMsg"],
    setup(props,{emit}){
        const listMsg = toRaw(props.listMsg)
        const state = reactive({
            id:listMsg.id,
            complete:listMsg.complete,
            msg:listMsg.msg
        })
        // 点击“删除”事件
        const deleteList =()=>{
            emit("deleteList",state.id)
        }
        // 光标移出事件
        const outInput=(event)=>{
            // console.log(event.target.value)
            const value = event.target.value
            emit("outInput",value,state.id)
            
        }
        // 点击复选框事件
        const decideWork=()=>{
            state.complete = !state.complete
            emit("decideWork",state.id,state.complete)
        }
        return{
            state,
            deleteList,
            outInput,
            decideWork
        }
    }
}
</script>
<template>
  <li>
      <input type="checkbox" :checked="state.complete" @click="decideWork()">
      <input type="text" v-model="state.msg" @blur="outInput($event)">
      <a href="javascript:void(0)" @click="deleteList()">删除</a>
  </li>
</template>


<style>

</style>